<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>ToDoList</title>
    <style>
        * {
            margin: 0;
            padding: 0;
        }
        body {
            height: max-content;
            width: 100%;
            background-color: #cdcdcd;
            display: flex;
            flex-direction: column;
            justify-content: start;
            align-items: center;
        }
        #app {
            width: 100%;
            height: 100%;
            background-color: #cdcdcd;
            display: flex;
            flex-direction: column;
            justify-content: start;
            align-items: center;
        }
        .head {
            background-color: #323232;
            width: 100%;
            height: 50px;
            display: flex;
            flex-direction: row;
            justify-content: center;
            align-items: center;
        }
        .head-box {
            width: 600px;
            height: 100%;
            display: flex;
            flex-direction: row;
            justify-content: space-between;
            align-items: center;
        }
        .head-box > h2 {
            color: #dddddd;
        }
        .head-box > input {
            width: 356px;
            height: 24px;
            border-radius: 6px;
            padding-left: 10px;
        }
        .list {
            width: 600px;
        }
        .list-head {
            height: 80px;
            display: flex;
            flex-direction: row;
            justify-content: space-between;
            align-items: center;
        }
        .count {
            width: 20px;
            height: 20px;
            border-radius: 10px;
            background-color: #e6e6fa;
            color: #666666;
            text-align: center;
        }
    </style>
    <script src="./vue.global.js"></script>
</head>
<body>
    <div id="app">
        <div class="head">
            <div class="head-box">
                <h2>ToDoList</h2>
                <input @keyup.enter="add" v-model="newToDo" type="text" placeholder="添加ToDo">
            </div>
        </div>
        <!-- 正在完成列表 -->
        <div class="list">
            <div class="list-head">
                <h2>正在完成</h2>
                <div class="count">{{ todo_list.length }}</div>
            </div>
            <ul>
                <li v-for="(item, index) in todo_list" :key="index">
                    <div>

                    </div></li>
            </ul>
        </div>
        <!-- 已经完成列表 -->
        <div class="list">
            <div class="list-head">
                <h2>已经完成</h2>
                <div class="count">{{ finished.length }}</div>
            </div>
            <ul>
                <li v-for="(item, index) in finished" :key="index">{{ item }}</li>
            </ul>
        </div>
    </div>
    <script>
        const app = Vue.createApp({
            data() {
                return {
                    todo_list: [],
                    finished: [],
                    newToDo: ""
                };
            },
            methods: {
                add() {
                    if (this.newToDo.trim()) {
                        this.todo_list.push(this.newToDo);
                        this.newToDo = "";
                    }
                }
            }
        });
        app.mount("#app");
    </script>
</body>
</html>